<html>
    <title>Bootstrap 实例</title>
<head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

   <div class="container">

        <h1>hello</h1>
        <h2>hello</h2>
        <h3>hello</h3>
        <h4>hello<small>副标签</small></h4>
        <p class="Lead">hellohellohellohellohellohellohello</p>
        <p>hellohellohellohellohellohellohello</p>
        <p class="Lead">hellohellohellohellohellohellohello</p>
        <p class="text-lift">life</p>
        <p class="text-center">center</p>
        <p class="text-right">right</p>


        <p class="text-lowercase">ABC</p>
        <p class="text-uppercase">abc</p>
        <p class="text-capitalize">abcd</p>
      
        <p>-----------------table-----------------</p>
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>

            <div class="clearfix visible-xs-block">111</div>

        </div>

        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <div class="row">
            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        
        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
        <div class="row">
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        
        <!-- Columns are always 50% wide, on mobile and desktop -->
        <div class="row">
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-6">.col-xs-6</div>
            <div class="col-xs-"></div>
        </div>

        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3"><del>.col-md-6 .col-md-offset-3</del></div>
          </div>
          <table class="table table-hover">
           <tr>
               <td>1</td>
               <td>1</td>
           </tr>
           <tr>
            <td>1</td>
            <td>1</td>
        </tr>
          </table>
   </div>

</body>



</html>